<template>
  <view class="pageContent">
    <view class="remote">
      <view class="remoteMain" @click="doorListCli(index)" v-for="(item,index) in doorList" :key="index">
        <image class="remoteBac" v-show="doorIndex==index" :src="images +'/selectGate.png'" />
        <image class="remoteIco" :src="localImages +'/damen.png'" />
        <view class="remoteGate" :class="item.faceSync>0 ? 'hasText': '' ">{{item.gatePostName || '悦江苑 东门'}}</view>
        <view class="remoteName">{{item.equipmentName || '设备名称'}}</view>
        <!-- <view class="remoteStaTex"  v-if="index==5">待审核</view> -->
        <!-- <image class="remoteStaIco" v-if="index==4" :src="images +'/faceSyn0.png'"/> -->
        <view class="remoteStaTex" v-if="item.faceSync==1">待审核</view>
        <image class="remoteStaIco" v-if="item.faceSync==2" :src="images +'/faceSyn0.png'" />
        <image class="remoteStaIco" v-if="item.faceSync==3" :src="images +'/faceSyn3.png'" />
        <image class="remoteSel" v-if="doorIndex==index" :src="localImages +'/doorSelect.png'" />
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        doorList: [],
        room: '',
        item: '',
      }
    },
    computed: {
      ...mapState({
        myInfo: state => state.user.myInfo
      })
    },
    onLoad(options) {
      var room = wx.getStorageSync('room');
      this.room = room;
      if (options.json) {
        console.warn('options.json', options.json)
        var item = JSON.parse(options.json)
        this.item = item;
        var title = "门禁权限";
      } else {
        var room = wx.getStorageSync('room');
        // this.item={
        // "ownerId": 32,
        // "projectId": 1,
        // "roomId": 3,
        // }
        this.item = room
        var title = "审核结果";

      }
      wx.setNavigationBarTitle({
        title: title
      })
      //切换登录时候，延迟调用查询
      setTimeout(()=>{this.ownerGatepostList();},300)

    },
    onShow() {
    },
    methods: {
      addMem() {
        wx.navigateTo({
          url: '/pages/subMe/addMem/main'
        })
      },
      //获取该住户的门禁列表
      ownerGatepostList() {
        var item = this.item;
        var url = '/UserServer/owner/info/ownerGatepostList'
        var params = {
          ownerId: item.ownerId,
          projectId: item.projectId,
          roomId: item.roomId,
        }
        util.wxRequestPro(url, params).then((res) => {
          console.warn('ownerGatepostList', res)
          if (res.param) {
            var param = res.param
            // param[0].faceSync="3"
            param.map((item) => {
              item.faceSync = parseInt(item.faceSync)
            })
            this.doorList = param;
          }
        })
      },
      //获取该住户的门禁列表
      gateList() {
        var url = '/UserServer/mini/gate/gateList'
        var params = {}
        util.wxRequestPro(url, params).then((res) => {
          console.warn('gateList', res)
          if (res.param) {
            var param = res.param
            this.doorList = param;
          }
        })
      },

    }
  }
</script>

<style lang="stylus" scoped>
  .pageContent {
    min-height: 100vh;
    padding: 0rpx 0rpx 0rpx 0rpx;
    background: #F3F6F9;
  }

  .remote {
    padding: 20rpx 30rpx 20rpx 30rpx;
  }

  .remoteMain {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
    width: 100%;
    height: 120rpx;
    border-radius: 10rpx;
    padding: 0rpx 20rpx 0rpx 116rpx;
    background: #FFFFFF;
    /* border 1px solid #666 */
    margin-bottom: 20rpx;
    z-index: 0;
  }

  .remoteIco {
    position: absolute;
    top: 50%;
    left: 40rpx;
    margin-top: -25rpx;
    width: 56rpx;
    height: 46rpx;
    background: #84D7FF;
    /* border 1px solid #84D7FF */
  }

  .remoteStaTex {
    position: absolute;
    top: 50%;
    right: 30rpx;
    margin-top: -25rpx;
    color: #FF8080;
  }

  .remoteStaIco {
    position: absolute;
    top: 50%;
    right: 40rpx;
    margin-top: -25rpx;
    width: 46rpx;
    height: 46rpx;
    /* border 1px solid #84D7FF */
  }

  .remoteSel {
    position: absolute;
    bottom: 0rpx;
    right: 0rpx;
    width: 56rpx;
    height: 36rpx;
    /* border 1px solid #84D7FF */
  }

  .remoteGate {
    font-size: 30rpx;
    color: #030303;
    line-height: 42rpx;
  }

  .remoteGate.hasText {
    padding-right: 80rpx;
  }

  .remoteName {
    font-size: 26rpx;
    color: #92A7B3;
  }

  .remoteBac {
    position: absolute;
    width: 100%;
    width: 100%;
    top: 0rpx;
    left: 0rpx;
    z-index: -1;
  }
</style>
